import React, { Component } from 'react';
import { Modal, Flex, Radio, Button, Upload, Row, Col, Input } from 'antd';

const DocumentModal = (props) => {

    const {
        themeColor, documentModalVisible, addDocument, closeDocumentModal, changeDocumentType, documentType,
        beforeUpload, documentLoading
    } = props;
    console.log("UserModal documentType => ", documentType);

    const iconStyle = {
        verticalAlign: "bottom",
        marginRight: "5px",
    };

    const options = [
        { label: '文档', value: 'Document' },
        { label: '网页', value: 'Website' },
    ];

    const generateFooter = () => <div>
        <Button size="default" style={{ background: themeColor }} loading={documentLoading} onClick={() => addDocument()}>确定</Button>
        <Button size="default" style={{ marginLeft: 20 }} onClick={() => closeDocumentModal()}>取消</Button>
    </div>

    const isDocumentType = documentType == "Document";
    console.log("UserModal isDocumentType => ", isDocumentType);

    return (
        <div>
            <Modal
                title = "新增文档"
                closable = {{ 'aria-label': 'Custom Close Button' }}
                open = {documentModalVisible}
                onCancel = {closeDocumentModal}
                footer = {generateFooter()}
            >
                <div style={{ padding: "15px 0px 50px 0px", lineHeight: 3 }}>
                    <Row>
                        <Col span={4}>文档类型</Col>
                        <Col span={20}>
                            <Radio.Group options={options} defaultValue={documentType} onChange={changeDocumentType} />
                        </Col>
                    </Row>
                    <Row style={{ display: isDocumentType ? "flex" : "none" }}>
                        <Col span={4}>上传文档</Col>
                        <Col span={20}>
                            <Upload
                                listType="picture-card"
                                className="avatar-uploader"
                                showUploadList={false}
                                beforeUpload={beforeUpload}
                                style={{ height: "54px", width: "100%" }}
                            >
                                <i className="ri-gallery-upload-line" style={iconStyle} />上传
                            </Upload>
                        </Col>
                    </Row>
                    <Row style={{ display: isDocumentType ? "none" : "flex" }}>
                        <Col span={4}>网页地址</Col>
                        <Col span={20}>
                            <Input.TextArea id={"documentModalWebsite"} />
                        </Col>
                    </Row>
                </div>
            </Modal>
        </div>
    );
};

export default DocumentModal;
